<template>
    <div class="select-btn-group">
        <div class="item-wrap"
             v-for="(each , index) in selectItems"
             :style="{
             opacity: each.show ? 1 : 0,
             width:itemSize
             }"
             :key="index">
            <div class="item"
                 :class="!selected && className(each)"
                 :ref="'item' + index"
                 @click="handleSelectItem('item' + index ,each)">
                <div v-html="each.value" class="text-wrap"></div>
            </div>
        </div>
    </div>
</template>

<script>

    const sizeList = {
        1: '50%',
        2: '50%',
        3: '33.3333%',
        4: '50%',
        5: '33.3333%',
        6: '33.3333%',
    };

    export default {
        props   : {
            item: Object
        },
        data() {
            return {
                selected: false,
            }
        },
        methods : {
            handleSelectItem(ref, item) {
                if (this.selected || !item) {
                    return;
                }
                this.selected = !this.selected;
                item.type     = 'right';
                item.el       = this.$refs[ ref ];
                if (item.event) {
                    this.$emit(item.event, item);
                    return
                }

                const next = item.next || this.item.next;

                this.$emit('send-item', item, next);
            },
            className(item) {
                let { className, theme } = item;
                return (className || '') + ' ' + this.item.theme
            }
        },
        computed: {
            selectItems() {
                return this.item.data.items;
            },
            itemSize() {
                if (this.item.data.size) {
                    return this.item.data.size;
                }

                let length = this.item.data.items.length;
                if (length > 6) {
                    return '25%';
                }

                console.log('length :', length);
                return sizeList[ length ];
            }

        }
    }
</script>

<style lang="less">
    .text-wrap {
        width: 100%;
        padding: .1rem .2rem;


        .img-h {
            margin: -.1rem -.2rem;
        }

    }

</style>
